import React from 'react'
import {CircleToggleButton} from "../../../common/button/CircleToggleButton"
import {EllipseToggleButton} from "../../../common/button/EllipseToggleButton"
import {EditButton} from "./EditButton"
import {ScreenButton} from "./ScreenButton"
import { diagramEngine } from '../../../components/Engine'


export class ToolBar extends React.Component {
    clearScreen (){
        for(var nodeKey in diagramEngine.diagramModel.nodes) {
            diagramEngine.diagramModel.nodes[nodeKey].remove()
        }

        diagramEngine.forceUpdate()
    }

    render (){
        const {onUndo, onRedo, canUndo, canRedo, selectedNode,fullScreen } = this.props

        return (
            <div className='btn-toolbar' >
                    <CircleToggleButton id="btn-undo"  buttonIcon="fa fa-mail-reply" tooltip="Redo" onClick={onUndo} disabled={!canUndo}/>
                    <CircleToggleButton id="btn-redo" buttonIcon="fa fa-mail-forward" tooltip="Undo" onClick={onRedo} disabled={!canRedo}/>
                    <CircleToggleButton id="btn-clear" buttonIcon="fa fa-trash" tooltip="Clear Canvas" onClick={this.clearScreen}/>
                    <CircleToggleButton id="btn-print" buttonIcon="fa fa-print" tooltip="Print"/>
                    <ScreenButton fullScreen={fullScreen} />
                    <CircleToggleButton id="btn-auto-layout" buttonIcon="fa fa-sitemap" tooltip="Auto Layout"/>
                    <EditButton id="btn-edit" buttonIcon="fa fa-edit" tooltip="Edit" selectedNode={selectedNode}/>
                    <EllipseToggleButton id="btn-export-svg" buttonName="Export SVG"/>
                    <EllipseToggleButton id="btn-export-png" buttonName="Export PNG"/>
                    <EllipseToggleButton id="btn-export-json" buttonName="Export JSON"/>
            </div>
        )
    }
}
